<template>
  <view class="page-chat">
    <view>
      <u-navbar :back-text="sessionName">
        <view class="navbar-right" slot="right" @click="goDetail">
          <u-icon name="more-dot-fill" size="28"></u-icon>
        </view> 
      </u-navbar>
    </view>
    <view class="wrap-msg" id="wrapMsg">
      <scroll-view  class="scroll-y" :scroll-y="true" :scroll-top="scrollTop" @scroll="scroll">
        <chat-list :msgList="curMsgs" :userInfos="userInfos" :myInfo="myInfo"></chat-list>
      </scroll-view>
    </view>
    <view class="input-wrap">
      <text class="iconfont iconyuyin"></text>
      <u-input v-model="text" type="textarea" @enter="send" :height="44" :custom-style="{background: '#fff',padding:'18rpx'}"></u-input>
      <text class="iconfont iconbiaoqing" @click="isShowEmoji=!isShowEmoji"></text>
      <text class="iconfont iconadd1" @click="upload"></text>
    </view>
	
	<chatEmoji v-show="isShowEmoji" @addEmoji="addEmoji"></chatEmoji>
  </view>
</template>

<script>
  import { mapState, mapGetters } from 'vuex'
  import chatList from '../../components/chat-list.vue'
  import chatEmoji from '../../components/chat-emoji.vue'
    
  export default {
    components: {
      chatList,
      chatEmoji
    },
    data () {
      return {
        text: '',
        toId: '',
        scrollTop: 0,
        old: {
          scrollTop: 0
        },
        isShowEmoji: false,
        scene: ''
      }
    },
    computed: {
      ...mapGetters({
        curMsgs: 'app/curMsgs'
      }),
      ...mapState({
        userInfos: (state) => {
          return state.app.userInfos;
        },
        myInfo: (state) => {
          return state.app.myInfo;
        },
        curSessionId: (state) => {
          return state.app.curSessionId;
        },
		teamInfos: (state) => {
		  return state.app.teamInfos;
		},
		// curMsgs: (state) => {
		// 	return state.app.msgs[state.app.curSessionId]
		// }
      }),
      sessionName () {
        const sessionId = this.curSessionId;
        let user;
        if (/^p2p-/.test(sessionId)) {
          this.scene = 'p2p';
          user = sessionId.replace(/^p2p-/, '');
          const userInfo = this.userInfos[user] || {};
          return userInfo.nick || userInfo.account;
        } else if (/^team-/.test(sessionId)) {
          this.scene = 'team';
          const teamInfo = this.teamInfos[sessionId.replace(/^team-/, '')] || {};
          return teamInfo.name;
        }
      }
    },
    methods: {
		addEmoji (key) {
			// 
			this.text += key;
		},
      send () {
        this.$store.dispatch('app/sendText', {
          scene: this.scene,
          to: this.toId.replace(this.scene=='p2p'?'p2p-':'team-', ''),
          text: this.text
        });
        this.text = '';
      },
      scroll (e) {
        this.old.scrollTop = e.detail.scrollTop
      },
	  upload () {
		  const me = this;
		  
		  uni.chooseImage({
		  	count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album'],
			success: function (res) {
				console.log(res);
				let blob;
				var xhr = new XMLHttpRequest();
				xhr.open('GET', res.tempFiles[0].path, true)
				xhr.responseType = 'blob'
				xhr.onload = function(e) {
					if (this.status == 200) {
						let blob = this.response;
						console.log(blob)
						me.$store.dispatch("app/sendFile", {
							scene: me.scene,
							to: me.curSessionId.replace(me.scene=='p2p'? "p2p-":'team-', ''),
							type: 'image',
							blob: blob
						})
					}
					
				}
				xhr.send()
			}
		  })
	  },
	  goDetail () {
		  uni.navigateTo({
			  url: './teamInfo?id=' + this.toId
		  })
	  }
    },
	watch: {
		curMsgs: function () {
			this.scrollTop = this.old.scrollTop;
			this.$nextTick(() => {
				this.scrollTop = 888888;
			})
		}
	},
    onLoad: function (option) {
      this.toId = option.id;
      this.$store.dispatch('app/setCurSession', option.id);
	  if (/^team-/.test(option.id)) 
		this.$store.dispatch('app/getTeamMembers', option.id.replace('team-', ''));
    }
  }
</script>

<style scoped lang="scss">
  .page-chat {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  .wrap-msg {
    flex: 1;
    background: #E4E7ED;
    padding: 0 20rpx;
    overflow: hidden;
  }
  .scroll-y {
    height: 100%;
  }
  .input-wrap {
    display: flex;
    // height: 100rpx;
    align-items: center;
    padding: 10rpx 0;
    background: #eee;
    .iconfont {
      font-size: 50rpx;
      margin: 0 20rpx;
    }
    .iconbiaoqing {
      margin-right: 0;
    }
  }
</style>
